<template>
  <contentModel>
    <template #header-right>
      <a-space>
        <a-button>提交下一步</a-button>
        <a-button>流程跟踪</a-button>
        <a-button status="success" @click="attentionWork">关注工作</a-button>
      </a-space></template
    >

    <div class="elfrom">
      <a-form ref="formRef" :model="form" :layout="layout" :rules="rules">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item field="name" label="密级" label-col-flex="400px">
              <a-input
                v-model="form.name"
                placeholder="please enter your username..."
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="post" label="订单号:" label-col-flex="300px">
              <a-input
                v-model="form.name"
                placeholder="please enter your username..." /></a-form-item
          ></a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item field="name" label="合同编号" label-col-flex="400px">
              <a-input
                v-model="form.name"
                placeholder="please enter your username..."
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="post" label="变更单号:" label-col-flex="300px">
              <a-input
                v-model="form.name"
                placeholder="please enter your username..." /></a-form-item
          ></a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              field="name"
              label="是否变更正文"
              label-col-flex="400px"
            >
              <a-input
                v-model="form.name"
                placeholder="please enter your username..."
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="order-info">
      <div>
        <subTitle>订单主信息变更</subTitle>
      </div>
      <div class="elfrom-two">
        <a-form ref="formRef" :model="form" :layout="layout" :rules="rules">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="name" label="变更类型" label-col-flex="400px">
                <a-input
                  v-model="form.name"
                  placeholder="please enter your username..."
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                field="post"
                label="订单模板:"
                label-col-flex="300px"
              >
                <a-input
                  v-model="form.name"
                  placeholder="please enter your username..." /></a-form-item
            ></a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                field="name"
                label="国内/外采购"
                label-col-flex="400px"
              >
                <a-input
                  v-model="form.name"
                  placeholder="please enter your username..."
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                field="post"
                label="签订时间:"
                label-col-flex="300px"
              >
                <a-input
                  v-model="form.name"
                  placeholder="please enter your username..." /></a-form-item
            ></a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="name" label="文本模板" label-col-flex="400px">
                <a-input
                  v-model="form.name"
                  placeholder="please enter your username..."
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-form-item field="name" label="变更原因:" label-col-flex="400px">
            <a-textarea
              width:600px
              placeholder="最大输入300个字符"
              :max-length="300"
              allow-clear
              show-word-limit
            />
          </a-form-item>

          <a-form-item field="name" label="备注:" label-col-flex="400px">
            <a-textarea
              width:600px
              placeholder="最大输入300个字符"
              :max-length="300"
              allow-clear
              show-word-limit
            />
          </a-form-item>
        </a-form>
      </div>
    </div>
    <div>
      <subTitle>订单正文变更</subTitle>
    </div>
    <a-space>
      <a-button>贯彻</a-button>
    </a-space>
    <div class="tabtwo">
      <standard-table
        v-model:selectedKeys="selectedKeys2"
        :component-config="tableComponentConfig"
        :render-config="tableRenderConfig"
        :render-keys="tableRenderKeys2"
        :loading="isLoading"
        :data="renderData2"
        :total="100"
        row-selection-type="checkbox"
        :columns="columns"
        @init-columns-end="initColumns"
        @selection-change="selectionChange"
        @page-change="pageChange"
        @page-size-change="pageSizeChange"
        @query-data="getData"
      >
        <!-- <template #operate="{ record, rowIndex }">
          <batchBtn
            :btn-list="rowBtnList"
            :other-params="{ record, rowIndex, activeTab, activeRadio }"
            type="2"
            @result="rowClickResult"
          ></batchBtn>
        </template> -->
      </standard-table>
    </div>
  </contentModel>
</template>

<script lang="ts" setup>
  import StandardTable from '@/common/components/standard-table/index.vue';
  import { Message } from '@arco-design/web-vue';
  import { sleep } from '@/utils/tools';

  import { defineAsyncComponent, ref, reactive } from 'vue';
  // import pageTitle from '@/common/components/title/page-title.vue';
  import subTitle from '@/common/components/title/sub-title.vue';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '@/views/purchase-order/components/tableComp/baseTableConfigAlterationAdministration';
  import { baseRenderKeys } from '@/views/purchase-order/purchase-order-alterationAdministration/baseRenderData';
  import lodash from 'lodash';

  const contentModel = defineAsyncComponent(
    () => import('@/common/components/content-model/index.vue')
  );
  const isLoading = ref(true);
  const renderData2 = ref<any[]>([]);
  const columns = ref<object[]>([]);
  const allColumns = ref<object[]>([]);
  // 下面的表格
  const selectedKeys2 = ref([]);
  // 下面的表格
  const tableRenderKeys2 = ref<any[]>([
    ...baseRenderKeys.finishedProduct.submitExamineTableRenderKeys,
  ]);
  const getData = async (queryInfo: object) => {
    renderData2.value = [];

    isLoading.value = true;
    console.log('queryInfo', queryInfo);
    await sleep(2000);

    const data2 = reactive([
      {
        id: 'id-11',
        orderInfo41: 'tt3',
      },
      {
        id: 'id-12',
        orderInfo41: 'tt3',
      },
    ]);

    renderData2.value = data2;

    isLoading.value = false;
  };
  const selectionChange = (val: string[]) => {
    console.log('selectedKeys', val);
    if (val.length > 0) {
      Message.success('更新成功/失败!');
    } else {
      Message.warning('没有修改的数据！');
    }
  };
  const attentionWork = () => {
    Message.success('已成功关注该任务!');
  };
  // 初期话
  const initData = () => {
    console.log('rowBtnList.value');
  };
  const pageChange = async () => {
    await initData();
  };
  const pageSizeChange = async () => {
    await initData();
  };
  const initColumns = (data: any[]) => {
    columns.value = lodash.cloneDeep(data);
    allColumns.value = lodash.cloneDeep(data);
  };
  const layout = ref('vertical');
  const form = reactive({
    section: {},
    name: '',
    post: '',
    isRead: false,
  });

  const rules = {
    name: [
      {
        required: true,
        message: 'name is required',
      },
    ],
  };

  // const visible1 = ref(false);
  // const open = () => {
  //   visible1.value = true;
  // };

  // const handleCancel = () => {
  //   visible1.value = false;
  // };
  // const handleChange = () => {
  //   visible1.value = false;
  // };
</script>

<style lang="less" scoped>
  .elfrom {
    width: 1000px;
    // border: 1px solid #000;
  }

  .elfrom-two {
    margin-bottom: 20px;
  }

  .order-info {
    margin-top: 28px;
  }

  .tabtwo {
    padding: 18px 50px;
    background: #fff;
  }
</style>
